<!DOCTYPE HTML>
<html>
<head>
  <title>女汉纸的自白</title>
	<meta charset="UTF-8">
	<link href="css/style2.css" rel="stylesheet"/>
	<link rel="stylesheet" href="css/flexslider.css"/>
	<link rel="stylesheet" href="css/mtt.css"/>
	<script src="js/jquery-1.12.2.js"></script>
 </head>
<body>
	<!----start-header----->
	 <div class="header">
	     <div class="wrap">
	      <div class="header-top">
			<!---start-top-nav---->
			<div class="top-nav">
					<div class="top-header">
						<div class="logo">
							<a href="index.html"><h1>客户</h1></a>
						</div>
					</div>
				<nav class="nav clearfix">
					<a id="menu-toggle" class="anchor-link" href="#"><img src="./images/men-bars.png" alt="" /></a>
					<ul class="simple-toggle" id="menu">
			        	<li><a href="index.html">关于</a></li>
			        	<li><a href="about.html">一个</a></li>
			        	<li><a href="#notemt" id="menmt">女纸</a></li>
			        	<!-- logo -->
			        	 <li class="logo"><a href="index.html"><h1>姓名</h1></a></li>
			        	<!-- logo -->
			        	<li><a href="portfolio.html" >心酸</a></li>
			        	<li><a href="404.html">血泪</a></li>
			        	<li><a href="contact.html">成长</a></li>
			        </ul>
				</nav>
			</div>
			<!---End-top-nav---->
		</div>
		<div class="banner">
			<div class="banner-text">
				<h2><span id=spanmt>论女纸是怎样由女屌丝变成女汉纸的</span></h2>
				<h2>Theory of the miss is how to have a female prick silk into a female man paper</h2>
			</div>
			 <!--<div class="flexslider">-->
				  <!--<ul class="slides" >-->
				    <!--<li><img src="images/nv1.jpg" width=300 height=400/></li>-->
				    <!--<li><img src="images/nv2.jpg" width=300 height=400 /></li>-->
				    <!--<li><img src="images/nv3.jpg" width=300 height=400/></li>-->
				   <!--</ul>-->

				<!--</div>-->
		</div>
	  </div>
	</div>
   <!----End-header----->
		 <!---start-content---->
		 <div class="wrap">
		   <div class="content" >
		       <div class="top-grids">
			   <div class="section group" >
				   <div class="all" id='box'>
					   <div class="screen">
						   <ul>
							   <li><img src="images/1.jpg" width="600" height="300"/></li>
							   <li><img src="images/2.jpg" width="600" height="300"/></li>
							   <li><img src="images/3.jpg" width="600" height="300"/></li>
							   <li><img src="images/4.jpeg" width="600" height="300"/></li>
							   <li><img src="images/5.jpg" width="600" height="300"/></li>
						   </ul>
						   <ol></ol>
					   </div>
					   <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
				   </div>
			   </div>
		   </div>
</div>
		      <div class="content-middle">
		      <div class="content-middle-top">
		      	<h4>随便写写的呢</h4>
		      </div>
		       <div class="content-middle-desc">
				<div class="section group">

						<div class="wrap1mt">
							<ul>
								<li><a href="#"><img src="images/01.jpg" width=200 height=186 /></a></li>
								<li><a href="#"><img src="images/05.jpg" width=200 height=186 /></a></li>
								<li><a href="#"><img src="images/03.jpg" width=200 height=186 /></a></li>
								<li><a href="#"><img src="images/04.jpg" width=200 height=186 /></a></li>
								<li><a href="#"><img src="images/02.jpg" width=200 height=186 /></a></li>
								<li><a href="#"><img src="images/06.jpg" width=200 height=186 /></a></li>
							</ul>
							<!--<div id="dvmt">变</div>-->
						</div>
					</div>
		        </div>
		       </div>
		      </div>
		 <!---End-content---->
		 <!---start-footer---->
		  <div class="footer">
		    <div class="wrap">
			   	<div class="copy-right">
					<p>最终解释权归本人所有<a href="http://w3layouts.com/" target="_blank"> W3layouts</a></p>
				</div>
			<div class="clear"> </div>
		</div>
	</div>
		 <!---End-footer---->
	</body>
</html>
<script src="js/mt.js"></script>
<script>
	function mymt(){
		var box=my$("box");
		var screen=box.children[0];
		var imgWidth=screen.offsetWidth;
		var ul=screen.children[0];
		var lis=ul.children;
		var ol=screen.children[1];
		var pic=0;
		for(var i=0;i<lis.length;i++){
			var li=document.createElement("li");
			ol.appendChild(li);
			li.setAttribute("index",i);
			li.innerHTML=i+1;
			li.onmouseover=function () {
				for(var j=0;j<ol.children.length;j++){
					ol.children[j].className="";
				}
				this.className="current";
				var target=-parseInt(this.getAttribute("index"))*imgWidth;
				animate(ul,target);
				pic=parseInt(this.getAttribute("index"));
			};
		}
		ul.appendChild(ul.children[0].cloneNode(true));
		f1();
		var tId=null;
		var arr=my$("arr");
		box.onmouseover=function () {
			arr.style.display="block";
			clearInterval(tId);
		};
		box.onmouseout=function () {
			arr.style.display="none";
			f1();
		};
		my$("right").onclick=clickHandle;
		function clickHandle() {
			if(pic==lis.length-1) {
				pic=0;
				ul.style.left=0+"px";
			}
			pic++;
			var target=-pic*imgWidth;
			animate(ul,target);
			if(pic==lis.length-1){
				ol.children[0].className="current";
				ol.children[ol.children.length-1].className="";
			}else{
				for(var i=0;i<ol.children.length;i++){
					ol.children[i].className="";
				}
				ol.children[pic].className="current";
			}
		}
		my$("left").onclick=leftClickHandle;
		function leftClickHandle() {
			if(pic==0) {
				pic=lis.length-1;
				ul.style.left=-(lis.length-1)*imgWidth+"px";
			}
			pic--;
			var target=-pic*imgWidth;
			animate(ul,target);
			for (var i = 0; i < ol.children.length; i++) {
				ol.children[i].className = "";
			}
			ol.children[pic].className = "current";

		}


		function f1() {
			tId= setInterval(clickHandle,5000);
		}

	}
	mymt();
	$(function () {
		$(".wrap1mt>ul>li").mouseenter(function () {
			$(this).css("opacity",1).siblings("li").css("opacity",0.5);
//			$(this).siblings("li").css("opacity","0.5");
//			$(this).css("opacity","1");
		});
		$(".wrap1mt>ul>li").mouseleave(function () {
			$(this).parent().find("li").css("opacity",1);
		});
	});


</script>

